<template>
  <div>
    <div ref="fullAllYearChart" style="height: 350px;"></div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      chart: null,
      list: [],
      option: {
        title: {
          text: '全年能耗使用概况（折标准煤）',
          left: '5%',
          top: '15%'
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '2%',
          right: '2%',
          bottom: '2%',
          containLabel: true
        },
        legend: {
          width: '1px',
        },
        backgroundColor: '',
        xAxis: {
          data: []
        },
        yAxis: {
          splitLine: {show: false}
      },
      series: [
        {
          type: 'bar',
          data: [],
          itemStyle: {
            color: 'rgb(82, 245, 252)'
          },
        }
      ]
    }
  }
  },
  name: "map-view",
  mounted() {
    this.fetchData()
    this.refreshData()
  },
  unmounted() {
  },
  methods: {
    refreshData: function () {
      setInterval(this.fetchData, 1000 * 60 * 10)
    },
    fetchData: function () {
      const fromDate = this.$getTimeInfo(new Date());
      const data = {
        content: {
          fromDate: fromDate.year + '-01-01 00:00:00',
          toDateType: 'day'
        }
      }
      this.$axios({url:'/ems/client/index/energy/time/trend', data: data}).then((content) => {
        this.list = content.list
        this.initChart()
      })
    },
    initChart: function () {
      const list = this.list
      this.option.xAxis.data = [];
      this.option.series[0].data = [];
      for (let i = 0; i < list.length; i ++) {
        const item = list[i]
        this.option.xAxis.data.push(item.time);
        this.option.series[0].data.push(this.$doubleVal(item.increaseStandValue));
      }
      this.$nextTick(() => {
        this.chart = this.$echarts.init(this.$refs.fullAllYearChart)
        this.chart.setOption(this.option)
      })
    }
  },
};
</script>
<style>
</style>
